<!--
 * @页面名称:首页档案统计图表
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="modules statistics">
    <a-card>
      <template #title>
        <span>{{ itemConfig.MS_ModuleName }}</span>
        <router-link v-if="itemConfig.MS_View" :to="{ path: itemConfig.MS_View }">
          <el-link type="primary">更多</el-link>
        </router-link>
      </template>
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="选择全宗:">
          <el-tree-select
            style="width: 100%"
            check-strictly
            v-model="formData.Fonds_ID"
            @change="getClassData"
            node-key="Fonds_ID"
            :props="{ label: 'Fonds_Name', children: 'children' }"
            :data="FatherData"
            :render-after-expand="false"
          />
        </el-form-item>
      </el-form>
      <div ref="echartsRef" class="content-box"></div>
    </a-card>
  </div>
</template>

<script setup lang="ts" name="lineChart">
import { ref, onMounted, nextTick } from "vue";
import { ECOption } from "@/components/Echarts/config";
import ECharts from "@/components/Echarts/index.vue";
import { transTree } from "@/utils/util";
import * as echarts from "echarts";
import { useEcharts } from "@/hooks/useEcharts";
import useCurrentInstance from "@/utils/useCurrentInstance";

const props = defineProps({
  itemConfig: {
    type: Object,
    default: () => {}
  }
});
const { proxy } = useCurrentInstance();

// 树结构全宗
const FatherData = ref<any[]>([]);
// 表单绑定字段
const formData = ref({
  Fonds_ID: ""
});
// 图表数据
const echartsData = ref([]);
// 图表实例
const echartsRef = ref<HTMLElement>();
// 初始化图表
const initChart = (data?: any) => {
  const myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
  const option: ECOption = {
    title: {
      text: "",
      textStyle: {
        color: "#a1a1a1"
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985"
        }
      }
    },
    legend: {
      data: data.map((v: any) => v.fsList.map((j: any) => j.OCName))[0],
      textStyle: {
        color: "#a1a1a1"
      }
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: data.map((v: any) => v.Year),
        axisLabel: {
          color: "#a1a1a1"
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          color: "#a1a1a1"
        }
      }
    ],
    series: (function () {
      let serie: any[] = [];
      const countMap = new Map<string, number[]>();
      data.forEach((item: any) => {
        item.fsList.forEach((fsItem: any) => {
          if (!countMap.has(fsItem.OCName)) {
            countMap.set(fsItem.OCName, []);
          }
          countMap.get(fsItem.OCName)!.push(fsItem.Count);
        });
      });
      Array.from(countMap.entries()).map(([name, values]) =>
        serie.push({
          name,
          type: "line",
          stack: "Total",
          emphasis: {
            focus: "series"
          },
          data: values
        })
      );
      return serie;
    })()
  };
  useEcharts(myChart, option);
};
const getData = (id: string) => {
  proxy.$vueAxios.get("DynamicStatistics/GetFilesStatistics", { fondsid: id }, { noLoading: true }).then((res: any) => {
    if (res.Mark) {
      initChart(res.List);
    }
  });
};
// 获取全宗数据
const getFondsData = () => {
  proxy.$vueAxios.get("Master_Base_Fonds/Get", { order: "Fonds_Order asc" }).then((res: any) => {
    // FondsData.value = res.List;
    FatherData.value = transTree(res.List, "Fonds_ID", "Fonds_Father");
    formData.value.Fonds_ID = res.List[0].Fonds_ID;
    getData(formData.value.Fonds_ID);
  });
};
const getClassData = (val: string) => {
  getData(val);
};

onMounted(() => {
  getFondsData();
  // getData(formData.value.Fonds_ID);
});
</script>

<style scoped lang="scss">
.statistics {
  height: 550px !important;
  :deep(.ant-card-body) {
    height: calc(100% - 106px);
  }
}
</style>
